نويسنده: سولماز اوجاقي 

در اوايل دهه  در موسسه سرن (مركز تحقيقات هسته اى اروپا)، دانشمندى به نام تيم برنرزلى گسترش اتصال درونى رايانه هاى دنيا را مطرح كرد و پيش بينى كرد كه در آينده بتوان به تمام اطلاعات و فايل هاى مرتب مربوط به فيزيك دسترسى يافت.

 

 اولين برنامه كاربردى فرامتن (HyperText) منتشر شد و در مارس برنرزلى به همراه روبرت كايليائو براى شروع كار پروژه اى را ايجاد كرد كه از طريق شبكه رايانه اى طراحی  دستيابى به فرامتن (HyperText) را فراهم مى كرد. پروژه اى به نام «تار عنكبوتى وب» كه شامل شبكه اى از پيوندها بود. در واقع هدف اصلى آن، اشتراك مسائل تحقيقاتى و همكارى ميان فيزيكدانان در نقاط مختلف بود.

 

شبكه وب در ماه مه پس از تحقيقات گسترده با نام وب در سرن منتشر شد و در سال به عموم معرفى گرديد. شبكه جهانى وب يكى از جديدترين خدمات اطلاع رسانى در اينترنت است كه نسبت به ديگر ابزارها و خدمات اينترنت به سرعت در حال رشد و گسترش است و بسيارى از صاحب نظران عقيده دارند كه ظهور شبكه جهانى وب با قابليت ارائه تصاوير گرافيكى رنگى، فيلم، صوت و متن همراه با پيوندهاى فرامتنى مهمترين دليل رشد روزافزون استفاده از اينترنت است، به طورى كه مشتاقان به كارگيرى وب به سرعت در حال افزايش اند.

 

طبق گزارش هاى آمارى در ژوئن سال ???? تنها ??? سايت وب بر روى اينترنت قابل دسترسى بود در حالى كه اين ميزان تا ماه ژوئن سال ???? به بيش از ?? هزار سايت وب رسيد. همچنين طبق برآورد شركت ديناكوئست تا پايان سال ???? بيش از ?? ميليون رايانه به اينترنت متصل شد كه رشدى معادل ?? درصد را نسبت به سال ???? نشان مى دهد.

 

CERN در سال ???? وب را براى استفاده به طور رايگان آزاد اعلام كرد. وب جذب كاربران در خارج از دنياى آموزشى را نيز آغاز كرده است. سازمان سرن، وب را در اختيار علاقه مندان به آن قرار داده است..

 

در ادامه به تحليل روند رشد اينترنت در کل جهان مي پردازيم :

 

به نقل از سايت روابط عمومي

 

 

کاربران اينترنت در جهان را اينگونه معرفي مي نمايد:

آمار کاربران اينترنت در جهان به تفکيک قاره و کشور را از سايت Inteet World Stats ببينيد:

* کل جميعت جهان تا سال 2006 : 6,499,697,060 نفر

* تعداد کاربران اينترنت در سطح جهان : 1,022,863,307 نفر (يعني حدود 15.2 %)

* زبان اول کاربران اينترنت : انگليسي 30.6 %

 

و در ادامه در نمودار زير روند رو به رشد اينترنت را در ايران مشاهده مي کنيد :

 

روند رشد کاربران در ايران 

 وب چيست ؟

نويسنده: سولماز اوجاقي 

گاهي وب را با اينترنت جاي همديگر استفاده مي شود . اينترنت اصطلاحي قديمي تر مي باشد به مفهوم شبکه جهاني دسترسي همگاني مي باشد که قبل از وب براي اتصال تلفن ها و سرورها به کار برده مي شد اما وب شبکه ايي از سرورها و کامپيوتر هاي به هم متصل شده اند که طبق يک سري پروتکل ها يا قرارداد هاي عمومي دسترسي ِ عموم را به صفحات مختلف امکان مي بخشند .

 

وب يا World Wide Web که به اختصار WWW,W3 نيز نامبرده مي شوند ، قسمتي از اينترنت است که محيطي ايجاد مي کند که مي توان به صدا ، تصوير ، انيمشن و متن نيز بهره برد .

وب يکي از خدمات روي اينترنت است مانند پست الکترونيکي . وب مخفف website مي باشد .

 

 

World Wide Web ! 

 

 

پس اينترنت شبکه ايي عظيم از کامپيوترها است که خدماتي روي انها ارائه مي شود که يکي از آنها وب مي باشد که امکان مشاهده صفحات مختلفي را با استانداردهاي مشخص (همچون HTTP ) انجام مي دهد که خدماتي همچون رفتن به صفحات مختلف ديگر ، پست الکترونيکي و .. را براي ما به ارمغان دارد . 

خدمات ديگر روي اينترنت که اينجا تنها به آنها اشاره مي شود ، همچون Telnet, gopher, FTP که جاي مناسب به آنها نيز خواهيم پرداخت .

اصطلاح ديگري که شايد با آن برخورد کنيد ، سرويس گيرنده / سرويس دهنده (Client / Server) مي باشد.

در اينترنت به طور کلّي مي توان همه? رايانه ها را به دو دسته تقسيم کرد. سرويس گيرنده / سرويس دهنده (Client / Server).

سرويس دهندگان، خدماتي را (مانند وب و FTP) براي سايرين فراهم مي کنند و سرويس گيرندگان، نيز براي دست يابي به اين خدمات، به سرويس دهندگان وصل مي شوند. 

يک رايانه? سرويس دهنده مي تواند چند سرويس را فراهم کند. براي مثال روي يک سرويس دهنده، يک نرم افزار وب سرور و ميل سرور نصب کنيم.

 

 

• وب، نه اينترنت

امروزه كاربران كامپيوتر سراسر جهان به استفاده از وب و اطلاعات گرافيكى آن گرايش دارند. از اين روى، اكثر رسانه ها، اكثر كاربران كامپيوتر، و حتى بسيارى از مشاغل وصل-خط از اصطلاح «وب جهان پهنا» و «اينترنت» به يك معنى استفاده مى كنند.

 

اما وب فقط بخشى از اينترنت بزرگ است. چون اينترنت شامل Telnet،FTPو حوزه هاى ديگر و همچنين كابل ها، كامپيوترها، و سيم هاى خود شبكه نيز مى شود. وب در بالاى اينترنت قرار دارد و در واقع رابط اينترنت است. يك قرارداد مخصوص اينترنت قرارداد يا پروتكل HTTP، است و اين پروتكل است كه استفاده از وب را در اينترنت ممكن مى ند. مهمترين هدف اينترنت آن است كه كاربران بتوانند از اطلاعات ذخيره شده در كامپيوتر كاربر ديگر بهره بگيرند. وب يك روش جذاب براى بهره گيرى از اطلاعات ذخيره شده در كامپيوترهاى خدمات دهنده (Server) پراكنده شده در اينترنت است.

خدمات دهنده هاى FTP، Telnet و ساير خدمات دهنده ها هستند. در واقع، بعضى از شركت ها از يك كامپيوتر براى چند پروتكل مبادله داده هاى مختلف بهره مى گيرند. تنها اختلاف بين خدمات دهنده FTP و خدمات دهنده وب در نرم افزار سازگار با HTTP است كه مى تواند اطلاعات را با برنامه مرورگر مبادله كند.

بسيارى از خدمات دهنده هاى وب رده پايين از انواع پى سى هاى مبتنى بر پردازنده هاى اينتل هستند، در حالى كه خدمات دهنده هاى رده متوسط اغلب كامپيوترهاى قدرتمند هستند. خدمات دهنده هاى وب رده بالا معمولاً كامپيوترهاى يونيكس هستند و مى توانند مقدار انبوهى از ترافيك مرتبط با وب را اداره كنند.

خدمات دهنده هاى وب و مرورگرهاى وب با استفاده از HTTP با يكديگر ارتباط برقرار مى كنند تا بتوانند داده هاى وب را كه خود به زبان HTML نوشته شده اند  طراحی  مبادله كنند. برنامه مرورگر مى تواند قطعات نوشته شده به اين زبان را تفسير كند و بعد صفحه مرتبط با آن را به نمايش درآورد. رمز وب، در فراپيوندهاى موجود در دل كدهاى HTML است. بنيان وب بر فلسفه فراپيوندها استوار است. هر كلمه يا تصويرى در هر صفحه وب مى تواند يك رابط به يك سند ديگر باشد. دسترسى به اطلاعات در FTP يا Telnetيا هر دو پروتكل مبادله اطلاعات ديگر اينترنت به اين سادگى نيست.

وب يك برنامه در حال تغيير و تكامل است و از نقش اوليه خود در ارتباطات دانشگاهى پا فراتر نهاده و براى نشر انواع اطلاعات به شكل جالب توجه براى مخاطبان اينترنت، در نظر گرفته شده است. براى كاربران جديد اينترنت، وب يك رابط چندمنظوره برنامه هاى كاربردى شبكه است كه مرز ميان آنها را پنهان ساخته است. رشد و گسترش كاربرد وب به دليل قابل استفاده بودن در محيط چند رسانه اى همچنان ادامه دارد.

 

 

 

 

شبکه اي از کامپيوتر ها 

 آشنايي اوليه با دنياي اينترنت

نويسنده: سولماز اوجاقي 

چگونه تعريف کردن اين موضوع ِ به ظاهر بسيار واضح و ساده و در عين حال پشت صحنه ايي پر از عوامل پشت صحنه ، مدتي ذهن مرا مشغول کرده بود تا براي شما عزيزان به چه روش و سياقي اين موضوع را توضيح دهم .

 

فکر مي کنم که اول بايد يک ذهنيت در ذهن خواننده ايجاد کنم تا بعد به توضيحات ِ کامل بپردازم از جمله : وب چيست؟ تاريحچه وب به چه ترتيبي مي باشد ؟ ورود وب در ايران و تاثيرات آن ...

 

در اول امر خوب است بدانيد که هدف ، ايجاد ارتباط  طراحی کامپيوترها براي دسترسي به اطلاعات دانشگاهي بوده است. پس در وب ، در ايتداي امر ، ايجاد يک شبکه يا اتصالي بين کامپيوتر بوده است تا به هدف مورد نظر برسيم .

 

اين ماجرا با وجودي که بخشي از حقايق به وجود آمدن اينترنت را بيان مي کند اما نمي تواند تمام واقعيات مربوط به آن را تشريح کند. بايد بگوييم افراد مختلفي در طراحی وب سایت  تشکيل اينترنت سهم داشته اند آقاي “Paul Baran” يکي از مهمترين آنهاست. آقاي باران که در دوران جنگ سرد زندگي مي کرد مي دانست که شبکه سراسري تلفن آمريکا توانايي مقابله با حمله اتمي شوروي سابق را ندارد. مثلا اگر رييس جمهور وقت آمريکا حمله اتمي متقابل را دستور دهد، بايد از يک شبکه تلفني استفاده مي کرد که قبلا توسط روس ها منهدم شده بود. در نتيجه طرح يک سيستم مقاوم در مقابل حمله اتمي روس ها ريخته شد.آقاي باران (Baran) تشکيل و تکامل اينترنت را به ساخت يک کليسا تشبيه کرد و معتقد بود، طي سال هاي اخير هر کس سنگي به پايه ها و سنگ هاي قبلي بنا اضافه مي کند و انجام هر کاري وابسته به کارهاي انجام شده قبلي است. بنابراين نمي توان گفت، کدام بخش از کار مهمترين بخش کار بوده است و در کل پيدايش اينترنت نتيجه کار و تلاش گروه کثيري از دانشمندان است. داستان پيدايش اينترنت با افسانه و واقعيت در هم آميخته شده است.

در اوايل دهه ?? ميلادي آقاي باران طي مقالاتي پايه کار اينترنت امروزي را ريخت. اطلاعات و داده ها به صورت قطعات و بسته هاي کوچکتري تقسيم و هر بسته با آدرسي که به آن اختصاص داده مي شود به مقصد خاص خود فرستاده مي شود. به اين ترتيب بسته ها مانند نامه هاي پستي مي توانند از هر مسيري به مقصد برسند. زيرا آنها شامل آدرس فرستنده و گيرنده هستند و در مقصد بسته ها مجددا يکپارچه مي شوند و به صورت يک اطلاعات کامل درمي آيند.

آقاي باران (Baran) طي مقالاتي اينچنيني ساختمان و ساختار اينترنت را پيش گويي کرد. او از کار سلول هاي مغزي انسان به عنوان الگو استفاده کرد، او معتقد بود: وقتي سلول هاي مغزي از بين بروند، شبکه عصبي از آنها ديگر استفاده نمي کند و مسير ديگري را در مغز انتخاب مي کند. از ديدگاه وي اين امکان وجود دارد که شبکه اي با تعداد زيادي اتصالات براي تکرار ايجاد شوند تا در صورت نابودي بخشي از آن، همچنان به صورت مجموعه اي به هم پيوسته کار کند. تا نيمه دهه ?? ميلادي کسي به نظرات او توجه اي نکرد. تا اينکه در سال ???? نيروي هوايي آمريکا و«آزمايشگاه هاي بل» به نظرات او علاقه مند شدند و پنتاگون با سرمايه گذاري در طراحي و ساخت شبکه اي براساس نظريات او موافقت کرد.

ولي آقاي باران (Baran) بنابر دلايلي حاضر با همکاري با نيروي هوايي آمريکا نشد. در اين ميان دانشمندي با نام تيلور (Tailon) وارد موسسه آرپا (ARPA) شد. او مستقيما به آقاي هرتسفلد رييس موسسه پيشنهاد کرد: (ARPA) آرپا هزينه ايجاد يک شبکه آزمايشي کوچک با حداقل چهار گره را تامين کند که بودجه آن بالغ بر يک ميليون دلار مي شد. با اين پيشنهاد تيلور تجربه اي را آغاز کرد که منجر به پيدايش اينترنت امروزي شد. او موفق شد در سال ????، دو کامپيوتر را در شرق و غرب آمريکا به هم متصل کند. با اين اتصال انقلابي در نحوه صدور اطلاعات در دنياي ارتباطات رخ داد که نتيجه آن را امروز همگي شاهد هستيم. اين شبکه به بسته هايي (packet) از داده ها که به وسيله کامپيوترهاي مختلف ارسال مي شدند اتکا داشت. پس از انکه ازمايشها سودمندي انرا مشخص کردند ساير بخش هاي دولتي و دانشگاهها پژوهشي تمايل خود را به وصل شدن به ان اعلام کردند . ارتباطات الکترونيکي به صورت روشي موثر براي دانشمندان و ديگران به منظور استفاده مشترک از داده ها در امد. در همان زمان که ARPAnet در حال رشد بود تعدادي شبکه پوشش محلي (LAN) در نقاط مختلف آمريکا به وجود امد. مديران LANها نيز به وصل کردن کامپيوترهاي شبکه هاي خود به شبکه هاي بزرگتر اقدام کردند . پروتوکل اينترنت ARPAnet IP زبان استاندارد حکمفرما براي برقراري ارتباط کامپيوترهاي شبکه هاي مختلف به يکديگر شد.تاريخ تولد اينترنت به طور رسمي اول سپتامبر ???? اعلام شده است. زيرا که اولين “IMP” در دانشگاه “UCLA” واقع در سانتاباربارا در اين تاريخ بارگذاري شده است.

از اوايل دهه ???? رشد استفاده از اينترنت به صورت تصاعدي افزايش يافت . يکي از علل چنين استقبالي ابزار جستجويي مانند Gopher و archie بوده است اما اينها در سال ???? تحت تاثير word wide web قرار گرفتند که به وسيله CERN يا ازمايشگاه فيزيک هسته اي اروپا ساخته شد . با ان که اينترنت از ابتدا طوري بود که مبادله اطلاعات براي تازه واردان بسيار ساده باشد. بزرگترين جهش در وب در سال ???? با عرضه نرم افزار موزاييک mosaic که نخستين برنامه مرورگر وب گرافيکي بود به وجود امد. برنامه موزاييک محصول تلاش دانشجويان و استادان بخش "مرکز ملي کاربردهاي ابر کامپيوتر " در دانشگاه ايلينويز آمريکا بود. براي نخستين بار موزاييک امکانات اشاره و کليک (به وسيله موش) را فراهم کرد. کاربران مي توانستند صفحات وب (web page) يا مجموعه اي از متن و گرافيک را کنار هم بگذارند تا هر کسي که ميخواست انها را بتواند روي اينترنت ببيند. وقتي با موش روي کلمه ها يا تصاوير خاصي که hyper link ناميده مي شد کليک مي کردند برنامه موزاييک به طور خود کار يک صفحه ديگر باز مي کرد که به کلمه يا تصوير خاص و کليک شده اختصاص داشت. بهترين بخش اين سيستم انجا بود که hyper linkها مي توانستند به صفحاتي روي همان کامپيوتر يا هر کامپيوتر ديگر اينترنت با خدمات وب اشاره کنند. صفحات وب هر روز متولد مي شدند و مفهوم موج سواري يا surfing روي وب متولد شد. اواسط سال ???? سه ميليون کامپيوتر به اينترنت وصل شده بود و در ان هنگام اجراي عمليات اهسته نشده بود. صفحات جديد وب که شامل همه چيز از اسناد دولتي تا مدارک شرکت ها و مدل هاي جديد لباس بود در سراسر دنيا چندين برابر شد . موزاييک و جانشينان ان مانند navigator محصول شرکت " نت اسکيپ " اينترنت را از قلمرو علمي به ميان مردم اوردند. طبق اخرين امار ?? درصد کاربران بعد از سال ???? وارد اين محيط شده اند. ميليون ها انساني که از اينترنت استفاده مي کنند نيازي ندارند که نکات فني مانند TCP/IP را بدانند . امروزه شرکتهاي خدمات دهنده اينترنت يا ISP اين کار را به عهده دارند.رشد روز افزون ان و ساده تر شدن استفاده ان همچنان ادامه دارد . هر چه تعداد مردم بيشتري به اينترنت رجوع کنند تعداد شرکت هاي سازنده برنامه هاي اينترنت بيشتر مي شود.با انکه بعضي از عاشقان اينترنت ان را نوعي شيوه زندگي مي دانند. در نظر بيشتر کاربران منبع سرگرمي اطلاعات است ولي بيشترين مصرف ان پست الکترونيکي يا همان email است که يکي از ابزارهاي ارتباطي کار امد به شمار مي رود. پيامها از کامپيوتري به کامپيوتر ديگر با سرعت پرواز مي کنند و منتظر ميمانند تا شخص فرصت خواندن انها را پيدا کند . وب امکانات خوبي براي کپي از نرم افزارهاي مجاز از لحاظ کپي فراهم ميسازد. وقتي که مي بينيم که در مدت کوتاهي اينترنت به چنين رشدي نايل آمده است، مطمئنا دشوار خواهد بود که آينده او را پيش بيني کنيم. طبق نظر کارشناسان ماهانه ?? درصد به تعداد کاربران اينترنت افزوده مي شود ولي تعداد دقيق کاربران که روزانه از آن استفاده مي کنند مشخص نيست. هرچند که پاره اي از کارشناسان تعداد آنها را تا ??? ميليون نفر حدس مي زنند. تعداد رسمي کاربران اينترنتي را در سال ???? کارشناسان ??? ميليون نفر اعلام کرده بودند. طراحی وب سایت 

قطعا در سال هاي آينده تحولات شگرفي را در زمينه شبکه هاي اينترنتي شاهد خواهيم بود. به وسيله اينترنت انسان به راه هاي جديدي دست پيدا کرد. در کنار اين شانس جديد توسط اينترنت، بايد بگوييم خطراتي نيز در رابطه با سياست و اقتصاد و علم به دنبال خواهد داشت. فرم امروزي اينترنت مديون همکاري تمام کاربران اينترنت در سرتاسر گيتي است که با اين تصور که اطلاعات موجود در سطح جهان را به راحتي با يکديگر مبادله کنند. اين تصوري بود که آقاي باران(Baran) از اينترنت داشت و اميدواريم در آينده نيز تکامل اينترنت در اين مسير باشد.

 

 

ترسيمي از وب گاه هايي که تنها ??????? از فضاي WWWشبکه جهاني اينترنت را به خود اختصاص داده اند ولي اکثر ترافيک کل شبکه اينترنت را در خود جاي داده اند.

يکي از پرسرعت ترين اينترنت ها فن آوا ميباشد fanava.ir

 

سلام مجدد خدمت تمامي خوانندگان وب سايت عصر نوشتن، با قسمت چهاردهم آموزش طراحي وب سايت از پايه در خدمتتون هستيم.

در اين جلسه به معرفي خصوصيتي مي پردازيم که از طريق آن مي توانيد عناصر صفحه را در هر جايي که مي خواهيد قرار دهيد

 

 

 

تعيين موقعيت عناصر در هر جايي از صفحه که شما دوست داريد:

 

همواره بدون هيچ گونه مداخله اي از سوي يک مرورگر وب، تمامي عناصري که درون يک صفحه سايت قرار دارند به همان ترتيب نمايش داده مي شوند، بنابراين اگر در تگ هدر، منوي راهبري قرار داشته باشد و در سر تيتر دوم، سه پاراگراف قرار دهيم در زمان نمايش در مرورگر خواهيد ديد که نحوه نمايش آنها به همان ترتيبي است که درون سورس قرار دارد و تا اينجاي کار نحوه سايت زدن ما به همين نحوي بوده است که در اينجا توضيح داديم، اما در اين بخش از آموزش مي خواهم شما را با برخي از قدرت هاي واقعي css و تاثيراتي که مي تواند بر روي سورس مان داشته باشد آشنا کنم. در اين قسمت شما خواهيد آموخت که چطور مي توانيد براي عنصرخاصي در صفحه مشخص کنيد که به طور صريح در کدام قسمت از محتواي سايت نمايش يابد بي آنکه به ترتيب قرار گرفتن عناصر درون صفحه توجه کنيد.

 

نمايش ساختار:

زمانيکه از css براي استايل دهي به سايت هاي خود استفاده مي کنيد براي هر قسمت از سايت خود يک Border در نظر بگيريد به اين ترتيب به خودتان کمک مي کنيد تا به راحتي براي آن قسمت خاص استايل هاي مد نظرتان را بيافزايد وتاثير آن را مشاهده نماييد، تنها بايد به خاطر داشته باشيد که پس از اينکه کارتان با آن قسمت تمام شد(css موقتي)border اي را که افزوده ايد حذف نماييد. بياييد براي خود قسمتي از سايت را ياد آوري کنيم:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Contact Us at Bubble Under</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<link href="style1.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<div id="header">

<div id="sitebranding">

<h1>BubbleUnder.com</h1>

<p>Diving club for the south-west UK - let's make a splash!</p>

</div>

</div><!-- end of header div -->

<div id="navigation">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About Us</a></li>

<li><a href="contact.html">Contact Us </a></li>

</ul>

</div>

<div id="bodycontent">

<h2>Contact Us</h2>

<p>To find out more, contact Club Secretary Bob Dobalina on 01793 641207 or email <a

href="[email protected]">[email protected]</a>.</p>

</div><!-- end of bodycontent div -->

</body>

</html>

 

 

حالا بياييد به فايل css خود يک borderبه هر يک از عناصر خود در صفحه اضافه کنيم. اين استايل را در انتهاي فايل css خود درج نماييد، بنابراين باعث مي شود تا براي تمامي عناصر سايت خود بردر را بکار ببريد و عنصري از قلم نيفتد و چنانچه عنصري داراي بردر است اين خصيصه برايش تکرار خواهد شد.

 

#header, #sitebranding, #tagline, #navigation, #bodycontent {

border: 1px solid red;

padding: 2px;

margin-bottom: 2px;

}

 

در اينجا من براي عناصر از پدينگ و مارجين پايين استفاده کرده ام تا ديدن عناصر درون هر قسمت از اين بردر ها را براي خود آسان نماييم. تصوير ايجاد شده را مي توانيد در عکس پايين ملاحظه بفرماييد.

 

اين تصوير کمي زشت به نظر مي رسد، درسته؟ اين تصوير حتي براي مدت کوتاهي زشت تر هم خواهد شد زمانيکه ما متن بخش درباره ما را جابجا مي کنيم. همانطور که شما هم مي دانيد زمانيکه ميخواهيد دکوراسون منزل خود را تغيير دهيد تمامي لوازم منزل خود را جا بجا مي کنيد و جاي اصلي آنها را تغيير مي دهيد

موقعيت دهي مطلق( absolute) :

 

شايد به جرات بتوان گفت که راحت ترين روش براي موقعيت دهي به عناصر استفاده از موقعيت دهي مطلق براي عناصر است. در هنگام استفاده از موقعيت دهي مطلق مي بايست موقعيت آن عنصر را از بالا و چپ صفحه نيز معين کنيم. تصور کنيد از يک مغازه جواهر فروشي مي خواهيد خريد کنيد و آدرس يک قطعه طلا را مي خواهيد به شخص فروشنده بدهيد، مي گوييد  در مثال زير، ما موقعيت هاي top و left را براي يک div با عرض 90px در نظر گرفته ايم تا هم از بالا و هم از سمت چپ پنجره مرورگرمان به ميزان px200 فاصله ايجاد کرده ايم.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Absolute Positioning</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<style type="text/css">

#redblock {

position: absolute;

top: 200px;

left: 200px;

color: white;

background-color: red;

width: 90px;

height: 90px;

padding: 5px;

}

</style>

</head>

<body>

<h1>Absolute Positioning</h1>

<div id="redblock">This is the red block.</div>

<p>The red block is positioned 200 pixels from the top and 200 pixels from the left.</p>

</body>

</html>

 

آماده شدن براي جابجايي عنصر با استفاده از موقعيت دهي:

 

در اين قسمت به موقعيت دهي مطلق به عناصر و با توجه به فاصله آنها از بالا و چپ نسبت به پنجره مرورگر شروع مي کنيم. به همين دليل مي بايست ابتدا زماني را در نظر بگيريد و استايل هاي موقتي را که داده ايد حذف کنيد. در نتيجه ما نيز استايل هاي پدينگ و بردر داده شده را که به عنصر body مان داده بوديم پاک مي کنيم.

 

- فايل style. css را باز کردهو پدينگ و بردر داده شده به عناصر Body را پاک کنيد.

- در عوض به جاي آن، دو خصيصه padding و margin را نوشته و مقادير آنها را برابر با صفر قرار دهيد.

استايل هاي بکار برده شده براي عناصر body شما در فايل css مي بايست مانند زير باشد:

 

body {

background-color: #e2edff;

font-family: Verdana, Helvetica, Arial, sans-serif;

line-height: 125%;

padding: 0;

margin: 0;

}

 

حالا مرورگر خود را refresh نماييد آنچه که ملاحظه مي نماييد مي بايست همانند تصوير زير باشد:

 

 

 

 

تگ هاي سر تيتر درون صفحه يعني BubbleUnder.com و About Us به وسيله مارجين احاطه شده اند. که اين مارجين توسط مرورگر به آنها داده شده حتي اگر ما خودمان به آنها مارجين ندهيم. ايده خوبي است که بياييم و اين مارجين ها را از بين ببريم وسعي کنيم تا تيترها تا آنجايي که امکان دارد به گوشه بالا و سمت چپ div دربرگيرنده آن نزديک شوند. اين امر باعث مي شود تا موقعيت دهي به تيتر ها براي ما راحتتر شده و همچنين مطمئن مي شويم که صفحه وب ما درون تمامي مرورگر ها به صورت يکسان نمايش مي يابد.

 

- در فايل style.css تگ h1 را بيابيد.

- خصوصيت جديدي به آن اضافه نماييد و مقدار مارجين آن را برابر با صفر قرار دهيد.

h1 {

font-size: x-large;

background-color: navy;

color: white;

padding-top: 2em;

padding-bottom: .2em;

padding-left: .4em;

margin: 0;

}

 

#tagline p {

font-style: italic;

font-family: Georgia, Times, serif;

background-color: #bed8f3;

border-top: 3px solid #7da5d8;

border-bottom: 3px solid #7da5d8;

padding-top: .2em;

padding-bottom: .2em;

padding-left: .8em;

margin: 0;

}

 

 

صفحه سايت خود را refresh نماييد. فواصلي که قبل و بعد از تيترهاي ذکر شده در تصوير بالا گفته شد مي بايست از بين رفته شده باشد و تصويري همانند شکل زير را مشاهده نماييد.

 

خوب حالا در اين مرحله سايت شما از هر زمان ديگري زشت تر خواهد شد اما مهم نيست و نبايد نگران باشيد چرا که اين امر موقت است و تنها بايد توجه داشته باشيد که براي اينکه به راحتي جابجا شدن عناصري از صفحه را که مي خواهيد و به صورت مطلق جاي آنها را درون صفحه معين کنيد را مشاهده نماييد به آنها Border اي با رنگ قرمز بدهيد تا جابجايي آنها برايتان مشخص باشد. سپس به انتهاي فايل css خود خصوصيت جديد زير را اضافه نماييد.

#navigation, #bodycontent, #header {

position: absolute;

}

حالا فايل css را ذخيره کرده و مجددا صفحه سايت را refresh نماييد.

• به هيچ وجه از به هم ريختگي سايت خود نگران نشويد !

 

حتما الان از به هم ريختگي سايت خود ناراحت هستيد و با خود مي گوييد که آيا هر بار که مي خواهيد از موقعيت دهي مطلق استفاده نماييد با همچين صحنه اي روبرو خواهيد شد؟! بسياري از طراحان وب سايت براي هر عنصري از سايت که مي خواهند از موقعيت دهي مطلق استفاده کنند از همان ابتدا فاصله آن را از بالا و سمت چپ پنجره مشخص مي نمايند تا آن عنصر سر جاي خود قرار گيرد و با تصويري مانند آنچه که شما با آن مواجه شده ايد را برخورد نکنند، اين کار تنها با تمرين امکان پذير است و به نظر من اهميت کار در اينجاست که شما با اين روند به طور کامل آشنا شويد.

 

 

همانطور که ميبينيد هر سه قسمتي که مقدار مطلق گرفته اند در گوشه چپ و بالاي سايت بر روي يکديگر افتاده اند، چون ما به مرورگر براي هر يک از آنها مقدار مجزايي نداده ايم و بنابراين مرورگر تنها آنها را همانطور که در سورس مقدار دهي شده اند نمايش مي دهد. تنها مي داند که آنها به طور مطلق مقدار دهي شده اند و اينکه موقعيت هر يک از آنها کجاست را نمي داند.

پس بياييد با جابجا کردن محتواي اصلي سايت و منوي راهبري به سمت پايين محتواي تگ Header را ببينيد. در فايل css خود دستور زير را اضافه کنيد:

#navigation, #bodycontent {

top: 120px;

}

 به همين دليل به عنصر bodycontent به اندازه px200 از سمت چپ فاصله مي دهيم تا از منوي راهبري که پهنايي برابر با 180px دارد فاصله گرفته و در کنار آن قرار گيرد.

 

 

پس با توجه به توضيحات داده شده آنچه که مي بايست به css خود اضافه کنيد تا ظاهر سايت درست شود، بدين صورت است:

#navigation, #bodycontent, #header {

position: absolute;

}

#navigation, #bodycontent {

top: 120px;

}

#bodycontent {

left: 200px;

}

 

براي اينکه طراحي صفحه سايت ما تمام شود همچنان کمي کار لازم است تا انجام شود:

 

- محدوده header و tagline تا انتهاي سطر ادامه ندارند.

- بين tagline و h1 فاصله بيهوده اي وجود دارد.

- پدينگ و بردر هاي قرمز داده شده به عناصر را مي بايست حذف کنيم.

- يک يا دو کامنت مي بايست به css مان اضافه کنيم تا توضيح بدهيم که در اين قسمت چه کاري انجام داده ايم.

 

خوب حالا شروع مي کنيم به ايجاد تغييرات گفته شده در بالا تا طرح نهايي اين صفحه از سايتمان ساخته شود.

 

-  تگ body و منوي راهبري را از بالا به جاي px120 به ميزان 107px فاصله دهيد . اين کار باعث مي شود تا پس از حذف کردن بردر هاي قرمز فاصله ميان تگ ها مناسب باشد.

- سپس به مرورگر ، تگ headerو tagline بگوييد تا سطر را به طور کامل اشغال کنند.(اين کار با اجراي دستور width براربر با 100% عملي خواهد شد.)

- بردرهاي قرمز رنگي را که پيش تر ايجاد کرده بوديم را حذف مي کنيم.

- در نهايت فکر خوبيست تا براي تمامي عناصري که موقعيت مطلق داده ايم کامنتي براي توضيح بنويسيم تا بدانيد که چکاري انجام داده ايد.

 

به اين ترتيب آنچه که با توضيحات بالا براي ايجاد تغيير در فايل css خود ايجاد کرده ايم، به صورت زير خواهد بود:

 

/*

This section deals with the position of items on the screen.

It uses absolute positioning - fixed x and y coordinates measured

from the top-left coer of the browser's content display.

*/

#navigation, #bodycontent, #header {

position: absolute;

}

#navigation, #bodycontent {

top: 107px;

}

#bodycontent

left: 200px;

}

#header {

width: 100%;

}

 

به اين صورت سوال مطرح شده اين است که اين تغييرات وب سايت ما را به چه شکلي در مي آورد؟ صفحه ساخته شده وب شما نيز بايد همانند تصوير زير باشد:

 

 

 

 

تقريبا مي توان گفت که ظاهر سايت عالي شده است اما يک کار کوچک ديگر نيز مي توان انجام داد تا ديگر طراحي سايت ما عالي به نظر برسد. به تگ Header يک بردر از بالا با ضخامت 3px بدهيد. براي منوي راهبري از همان رنگ آبي اي که براي tagline استفاده کرده ايد و بياييد تا بردر نقطه چين دور منوي راهبري را حذف کنيم. دستورات تغييرات گفته شده نيز بدين صورت خواهد بود:

#navigation {

width: 180px;

background-color: #7da5d8;

}

#header {

border-top: 3px solid #7da5d8;

}

 

اينک فايل css خود را ذخيره کرده و مرورگر خود را refresh نماييد. تصوير نهايي به اين صورت خواهد بود:

 

 

تا اين لحظه ساختار پايه اي وب سايت و تگ هاي html  و  body  و p  براي پاراگراف وh براي هدر ها  را شناختيم و با آن ها کار کرديم و در اين قسمت يک ساختار طلائي به نام div را معرفي مي نماييم.

 

div يک تگ بلاک است و به همراه تگ span  بيشترين استفاده در صفحات استاندارد وب سايت را دارد .

اين تگ معمولا براي قرار دادن گروهي از عناصر داخل آن مورد استفاده قرار مي گيرد و داخل آن مي توان از عناصر ديگر مانند h1 , img , a , p  و غيره استفاده کرد.

اين تگ هيچ استايلي از جمله margin  و padding ندارد و براي شکل دادن به ظاهر آن از دستورات css استفاده مي کنيم.

 

به مثال زير دقت نماييد :

 

    <p>This is a paragraph.</p>

    <p>This is another paragraph.</p>

    <p>This is yet another paragraph.</p>

    <p>And just one more paragraph.</p>

    <div>This is a div.</div>

    <div>The content of each div appears on a new line.</div>

    <div>But unlike paragraphs, there is no additional padding.</div>

    <div>A div is a generic block-level container.</div>

 

نکته نويسنده مقاله: بر خلاف تمامي آموزش هاي ديگر در اين جا ابتدا تگ div تدريس مي شود و سپس سراغ تگ  table يا همان جدول مي رويم .

 

به شکل زير دقت کنيد :

 

design-web-46.jpg

 

در اين مثال ما صفحه را به قسمت هاي متفاوتي تقسيم کرديم  بالا براي بنر و سمت راست براي منو هاي سايت و سمت چپ براي قسمت اصلي سايت.

دقت کنيد که شما داخل تگ div  مي توانيد تمامي عناصر مانند p , h1 , ul , a , img را قرار دهيد ولي به طور مثال نمي توانيد تگ div را داخل p   قرار دهيد .

با بررسي مثال زير و نکات آن مي توانيد تجربه خوبي کسب کنيد :

 

در اين مثال ما صفحه را به 2 قسمت header  و content body  تقسيم کرده ايم . در قسمت header از 2 تگ h1 و p استفاده کرده ايم و در قسمت body content  از تگ هاي بسيار زيادي استفاده کرده ايم .

 

در زير کد هدر نمايش داده شده است :

 

    <div id="header">

    <h1>BubbleUnder.com</h1>

    <p>Diving club for the south-west UK - let's make a splash!</p>

    </div>

 

 

design-web-47.gif

 

در اين مثال علاوه بر توضيح تقسيم بندي سايت  با تگ div  ، استفاده از  attribute  بسيار مهم id  هم توضيح داده مي شود .

 

Id و قوانين آن:

 

•    معمولا از id براي تفکيک گروه هاي بزرگ مانند 2 مثال قبل استفاده مي شود

•    يک نام id  فقط يک بار در صفحه قابل استفاده است

•    Id يک attribute است و header  يک value براي آن طبق اين قانون :     attribute="value"

•    نام attribute  بايد با حروف کوچک باشد مانند  id , class و غيره و value آن داخل ""

 

تگ هاي تو در تو (nesting tag) :

 

در مطالب گذشته گفتيم که در تگ div  مي تواند تگ هاي ديگري همچون p , ul  و غيره قرار گيرد در حالي که خود تگ div ميتواند در داخل تگ div  ديگري قرار گيرد که به اين نوع تگ هاي تو در تو گفته مي شود .

 

در بسياري موارد در طراحي هاي حرفه اي مجبوريم که از تگ هاي تو در تو استفاده کنيم و اين روش نظم خاصي به کار  طراحي شما  مي بخشد .

 

کد زير مي تواند شما را بيشتر با تگ هاي تو در تو آشنا کند :

 

    <div id="outer">

      <div id="nested1">

          <p>A paragraph inside the first nested div.</p>

      </div>

      <div id="nested2">

          <p>A paragraph inside the second nested div.</p>

      </div>

    </div>

 

 

در استفاده از تگ هاي تو در تو بايد به قانوني به نام Indenting Markup توجه کرد که شرح مي دهد تگ هاي داخلي را کمي جلوتر از سمت چپ نسبت به والد خود باز کرده و در همان راستا ببنديد . همان طوري که مي بينيد تگ div  با id  مشخص nested1 کمي با فاصله بيشتر از چپ نسبت به والد خود يعني تگ div با  id مشخص outer باز شده است.

نکته ديگري که مي بايست براي خوانايي بيشتر در استفاده از تگ هاي تو در تو دقت نماييد استفاده از کامنت گذاري است که در قسمت هاي قبل توضيح داده شد .

 

        </div> <!-- end of ier div -->

      </div> <!-- end of nested div -->

    </div> <!-- end of outer div -->

 

براي تمرين اين قسمت از آموزش، شماي تگ هاي صفحه

فراموش نکنيد هنوز وب سايت شما ظاهر مناسبي ندارد براي شکل دادن به وب سايت خود بايد از css استفاده نماييد که در قسمت هاي بعدي توضيح داده خواهد شد .

در اين درس به کار با متنها مي پردازيم. ابتدا با اين تگ شروع مي کنيم:

1-    <B> اين تگ باعث مي شود کلماتي که بين اين تگ و تگ پاياني آن قرار دارند به صورت پر رنگ و بولد (Bold) ديده شوند. به مثال زير توجه کنيد:

 

<b>متني که اينجا قرار بگيرد به صورت بولد نمايش داده مي شود</b>

مثال بالا به صورت زير ديده مي شود:

 

متني که اينجا قرار بگيرد به صورت بولد نمايش داده مي شود

 

بياييد با تگهاي ديگري ادامه دهيم:

 

2-    زيرخط (Underline):

 

<u>اين متن با زير خط مشاهده مي شود</u>

اين هم نتيجه:

 

اين متن با زير خط مشاهده مي شود

 

3-    حروف کج (Italic):

 

<i>اين متن به صورت مورب ديده مي شود</i>

و نتيجه به اين صورت است:

 

اين متن به صورت مورب ديده مي شود

 

4-    حروف خط خورده:

 

<strike>اين متن به صورت خط خورده ديده مي شود</strike>

متن در مرورگر به اين صورت ديده مي شود:

 

اين متن به صورت خط خورده ديده مي شود

 

5-    وسط چين:

 

<center>اين متن در وسط خط نوشته مي شود</center>

نتيجه کد:

 

اين متن در وسط خط نوشته مي شود

 

شما مي توانيد بيشتر از يک فرمان را براي يک متن اجرا کنيد. مثلاً وقتي که مي خواهيد متني به صورت پر رنگ و کج نوشته شود. براي اين کار هر دو تگ ابتدايي را براي متن در ابتداي آن و تگهاي پاياني را در جايي که مي خواهيم پايان پر رنگي و کجي متن باشد قرار مي دهيم.

 

با اين مثال توجه کنيد:

 

<b><i>اين متن به صورت کج و پر رنگ ديده مي شود</i></b>

نتيجه هم به اين صورت ديده مي شود:

 

اين متن به صورت کج و پر رنگ ديده مي شود

 

آيا ترتيب قرار گرفتن تگهاي پاياني مهم است؟ در پاسخ بايد گفت در مثال بالا خير، اما مواردي وجود دارد که ترتيب قرار گرفتن تگها مهم است مثلاً قرار گرفتن تگ پاياني <HTML/> قبل از <BODY/> اشتباه است. شما با تمرين و تجربه مي توانيد اين نکته را فرا بگيريد. شما مي توانيد براي جلو گير از اشتباه HTML را به صورت زير بنويسيد:

<b>

       <i>

            اين متن به صورت پر رنگ و کج ديده مي شود

        </i>

</b>

اما اين روش خسته کننده است. در اينجا مهم نيست تگها به چه صورت باز و بسته شوند. اما نکته مهمي که بايد در نظر داشته باشيد اين است که متنها تحت تأثير تگهايي که قبل از آنها باز شدهاند و بسته نشده اند قرار مي گيرند. تأثير يک تگ تمام مي شود وقتي که تگ بسته شود.

 

مثال زير را در نظر داشته باشيد:

 

<b><i><u>اين متن پر رنگ، کج و داراي زيرخط است</u></i></b>

اين نتيجه را به ما مي دهد:

 

اين متن پر رنگ، کج و داراي زيرخط است

 

اما اين يکي:

 

 

<center><b><i>به اين مثال توجه کنيد</i></b></center>

و اين هم نتيجه آن: